<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-22 16:29:09
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 15:05:31
 -->
<template>
  <div class="simple-select" tabIndex="0">
    <vxe-grid
      ref="table"
      size="mini"
      header-row-class-name="header-row"
      :columns="columnsData"
      :data="tableData"
      highlight-hover-row
      highlight-current-row
      :keyboard-config="{isArrow: true, isEnter:true}"
      :loading="tableLoading.goods"
      @cell-click="onCellClick"
      @current-change="onCurrentChange"
    />
    <div class="text-center">
      <el-pagination
        mini
        layout="prev, pager, next"
        :total="pageInfo.total"
      />
    </div>
  </div>
</template>

<script>
import { selectContainerStockByStore as listData } from '@/api/goods/goods-sku.js'
import { oftenuse } from '@/libs/mixins'
import _ from 'lodash'
import clonedeep from 'clonedeep'

export default {
  name: 'SelectGoodsStock',
  mixins: [oftenuse],
  props: {
    keywords: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      dataObj: {},
      columnsData: [
        { field: 'name', title: '商品名称/规格', showOverflow: true, width: 250 },
        { field: 'code', title: '商品编号', width: 150 },
        { field: 'unitNameStr', title: '单位', width: 100 },
        { field: 'stock', title: '库存数量', width: 150,
          slots: {
            default: (params) => {
              const { row } = params
              const { originQuantity, quantityIn, quantityOut } = row
              const value = originQuantity + quantityIn - quantityOut
              return [<span>{value}</span>]
            }
          }}
      ]
    }
  },
  created() {
  },
  mounted() {
    this.searchGoods(this.keywords)
  },
  destroyed() {
  },
  methods: {
    searchGoods: _.debounce(function(value) {
      const params = {
        data: { keywords: value },
        page: this.pageInfo
      }
      this.getGoodsList(params)
    }, 100),
    getGoodsList(params = { data: this.dataObj, page: this.pageInfo }) {
      this.setTableLoading('goods', true)
      return new Promise((resolve, reject) => {
        listData(params).then(res => {
          const records = res.data.records
          this.tableData = records
          this.pageInfo.total = res.data.total
          if (records.length > 0) {
            this.$refs.table.setCurrentRow(records[0])
          }
          this.setTableLoading('goods', false)
          const tableDom = this.$refs.table.$el
          tableDom.focus()
          resolve(res)
        }).catch(err => {
          reject(err)
          this.setTableLoading('goods', false)
        })
      })
    },
    // ON
    onCellClick(params) {
      const { row } = params
      this.handleSelectSure(row)
    },
    handleSelectSure(row) {
      const data = clonedeep(row)
      data.skuId = data.id
      data.id = null
      this.$emit('on-select-data', data)
    },
    onCurrentChange(e) {
    }
  }
}
</script>
<style lang="scss" scoped>
$vxe-table-row-height-mini: 10px;
.simple-select{
  border: #419efb 2px solid; overflow: auto;
  .header-row{ background: seagreen;}
  // max-height: 300px; overflow: scroll;
  /deep/.vxe-table{ border: none;}
}
</style>
